<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MaxRectsBinPack demo</title>
    <style>
        h3, div, body{
            margin: 0;
            padding: 0;
        }
        .source{

        }

        .source img{
            height: 300px;
            border: 1px solid #aaa;
        }

        h3{
            margin-top: 5px;
        }

        canvas{
            border: 1px solid #aaa;
        }
    </style>
</head>
<body>
    <h3>source image</h3>
    <div class="source">
        <img id="anim1" src="http://g.alicdn.com/tmapp/animation-data/2.2.41/tahiti/demo/data/anim1.png">
        <img id="anim2" src="http://g.alicdn.com/tmapp/animation-data/2.2.41/tahiti/demo/data/anim2.png">
    </div>
    <h3>merged image</h3>
    <canvas id="texture"></canvas>
    <script src="../build/MaxRectsBinPack.js"></script>
    <script src="./data.js"></script>
    <script>
        var canvas = document.querySelector("#texture");
        var ctx = canvas.getContext("2d");
        var textureWidth = 300;
        var textureHeight = 300;
        canvas.width = textureWidth;
        canvas.height = textureHeight;

        //create rectangles
        var rectangles = [];
        ["anim1", "anim2"].forEach(function(name, i){
            var data = window[name];
            for(var i in data){
                var t = data[i];
                rectangles.push({
                    width:t.w,
                    height:t.h,
                    imgName:name,
                    imgX:t.x,
                    imgY:t.y
                });
            }
        });

        var pack = new MaxRectsBinPack.MaxRectsBinPack(textureWidth, textureHeight, false);
        var result = pack.insert2(rectangles, MaxRectsBinPack.BestShortSideFit);

        var imgs = {
            anim1:document.querySelector("#anim1"),
            anim2:document.querySelector("#anim2")
        };

        //draw rectangles
        window.onload = function(){
            result.forEach(function(rectangle){
                ctx.drawImage(imgs[rectangle.imgName], rectangle.imgX, rectangle.imgY, rectangle.width, rectangle.height, rectangle.x, rectangle.y, rectangle.width, rectangle.height);
            });
        }
    </script>
</body>
</html>